﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Percursos.aspx.cs" Inherits="EasyFrota_Mobile.Percursos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
      
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script src="Scripts/Maps/googleMapsV3.js" type="text/javascript"></script>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

      <p style="text-align:right;">
    <a href="#PanelHelp" data-role="button" data-icon="gear" data-mini="true" data-iconpos="right" data-inline="true">Legenda</a>
   </p>
    <div data-role="collapsible" id="filtros_percursos">
        
         <h4>Filtro</h4>
         
         <asp:Label AssociatedControlID="dropDrownTipoViatura" ID="LabelTipo" runat="server" Text="Tipo Viatura:"></asp:Label>
        <asp:DropDownList ID="dropDrownTipoViatura" runat="server" AutoPostBack="True" 
             onselectedindexchanged="dropDrownTipoViatura_SelectedIndexChanged" data-native-menu="false">
        </asp:DropDownList>
        
                 <asp:Label ID="lblVeiculo" runat="server" Text="Veículo:"></asp:Label>
                <asp:DropDownList ID="dropDownVeiculo" runat="server" data-native-menu="false" AutoPostBack="True"
                     onselectedindexchanged="dropDownVeiculo_SelectedIndexChanged">
                </asp:DropDownList>
             <asp:Label ID="lblPercurso" runat="server" Text="Percurso:"></asp:Label>
            <asp:DropDownList ID="dropdownPercuros" data-native-menu="false" runat="server"/>
        
       <!-- DROP DOWN DOS PERCURSOS -->

      
    </div>
     <div data-role="panel" data-position-fixed="true" data-theme="b" data-position="right" id="PanelHelp">
                
                    <h3> Legenda:</h3>
                   <p>
                        <asp:Image ID="imgStart" runat="server" ImageAlign="Middle"  ImageUrl="http://www.google.com/intl/en_us/mapfiles/ms/micons/green-dot.png" AlternateText="Início da viagem"  />Início da viagem<br />
                    <asp:Image ID="imgStop" runat="server" ImageAlign="Middle"  ImageUrl="http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png"   AlternateText="Paragem"           />Paragem (Veiculo Ligado)<br />
                     <asp:Image ID="Image2" runat="server" ImageAlign="Middle" ImageUrl="http://www.google.com/intl/en_us/mapfiles/ms/micons/orange-dot.png"   AlternateText="Paragem do Percurso"           />Paragem do Percurso<br />
                    <asp:Image ID="Image1" runat="server" ImageAlign="Middle" ImageUrl="http://www.google.com/intl/en_us/mapfiles/ms/micons/red-dot.png"     AlternateText="Fim da viagem"     />Fim da viagem<br />
  
                   </p>
            <asp:Literal runat="server" ID="LitLegend"></asp:Literal>
   </div>
   
   <div id="myDialog" data-role="dialog">
    <div id="myMessage">aaa</div>

    </div>
     
        <div id="map_canvas" style="width: 100%; height: 400px;"></div>
       <!--Javascript-->
     
      <script type="text/javascript">
   // <![CDATA[
          var geocoder;
          var point = 0;
          var updateTimeout = "15s";
          var poly = [];
          var polys = [];
          var line = null;
          var start = null;
          var end = null;
          var points = [];
          var overlays = [];
          var overlaysPolys = [];
          var portugal = new google.maps.LatLng(39.563, -6.8);
         /* function initialize() {

              geocoder = new google.maps.Geocoder();
              portugal = new google.maps.LatLng(39.563, -6.8);
              point = "0";
              var myOptions = {
                  zoom: 6,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  streetViewControl: false,
                  scaleControl: false,
                  
                  center: portugal
              };
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

           
          }*/
          
     function doStuff() {
         $('#myDialog').bind('pageshow', function(){


      alert("entrou");
      var updatedText = "Teste";
      $("#myMessage", "#myDialog").html(updatedText);                    
   
         $.mobile.changePage('#myDialog', 'pop',true,true);
          <%= litBuildPoly.Text %>
             });
    }

          

          <% if (LoadMap) {%>
          

                        
  function showLine(overlays, overlaysPolys) {
        geocoder = new google.maps.Geocoder();
              portugal = new google.maps.LatLng(39.563, -6.8);
              point = "0";
              var myOptions = {
                  zoom: 6,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  streetViewControl: false,
                  scaleControl: false,
                  
                  center: portugal
              };
              map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 
    for (i = 0; i < overlays.length; i++) {
        overlays[i].setMap(map);
        
        //        var marker = new google.maps.Marker({
        //            position: new google.maps.LatLng(overlays[i].getPosition().lat(), overlays[i].getPosition().lng()),
        //            icon: overlays[i].getIcon(),
        //            clickable: false,
        //            map: map
        //        });
    }

    for (i = 0; i < overlaysPolys.length; i++) {
        overlaysPolys[i].setMap(map);
    }
}
          
       var redIcon = new google.maps.MarkerImage();
    redIcon.url = "images/red-dot.png",
    redIcon.size = new google.maps.Size(32, 32);
    redIcon.anchor = new google.maps.Point(16, 32);
    var shadow = new google.maps.MarkerImage();
    shadow.size = new google.maps.Size(56, 32);
    var redMarker = {
                icon: redIcon,
                shadow: shadow,
                clickable: false
    };
    
    
    //var redMarker = {icon: redIcon, clickable: false};
    
    var yellowIcon = new google.maps.MarkerImage();
    yellowIcon.url = "http://www.google.com/intl/en_us/mapfiles/ms/micons/yellow-dot.png",
    yellowIcon.size = new google.maps.Size(32, 32);
    yellowIcon.anchor = new google.maps.Point(16, 32);
    var shadow = new google.maps.MarkerImage();
    shadow.size = new google.maps.Size(56, 32);
    var yellowMarker = {
                icon: yellowIcon,
                shadow: shadow,
                clickable: false
    };
    
    var greenIcon = new google.maps.MarkerImage();
    greenIcon.url = "images/green-dot.png",
    greenIcon.size = new google.maps.Size(32, 32);
    greenIcon.anchor = new google.maps.Point(16, 32);
    var greenMarker = {
                icon: greenIcon,
                shadow: shadow,
                clickable: false
    };
    //var greenMarker = {icon: greenIcon, clickable: false};


    var pinkIcon = new google.maps.MarkerImage();
    pinkIcon.url = "http://www.google.com/intl/en_us/mapfiles/ms/micons/pink-dot.png",
    pinkIcon.size = new google.maps.Size(32, 32);
    pinkIcon.anchor = new google.maps.Point(16, 32);
    var pinkMarker = {
                icon: pinkIcon,
                shadow: shadow,
                clickable: false
    };

    var blueIcon = new google.maps.MarkerImage();
    blueIcon.url = "images/blue-dot.png",
    blueIcon.size = new google.maps.Size(32, 32);
    blueIcon.anchor = new google.maps.Point(16, 32);
    var blueMarker = {icon: blueIcon,
                    shadow: shadow,
                    clickable: false};
                    
    var orangeIcon = new google.maps.MarkerImage();
    orangeIcon.url = "images/orange-dot.png",
    orangeIcon.size = new google.maps.Size(32, 32);
    orangeIcon.anchor = new google.maps.Point(16, 32);
    var orangeMarker = {icon: orangeIcon,
                    shadow: shadow,
                    clickable: false};
                    
    

    
     <%= litBuildPoly.Text %>
    
    //midArrows(points);
    //]]>
    </script>
    <% } %>
</asp:Content>
